<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ejemplo de buscador interno en la página.</title>
<%@include file="./../jsp/structure/common-resources.jsp"%>
<script>

	/* 
	Para crear un dielog con un iframe dentro donde poder cargar una pagina,
	en este caso un buscador, se bera desarrollar esta funcion.
	Cargando la url, el id unico del iframe, el titulo del dialog, y en caso
	de ser necesario el tamaño del mismo.
	*/
	$(function() {
		$("#buscador").click(function(){
		    var url = "${appCtx}/busquedaEmpresa";
	        var iframe = $('<iframe id="id_unico_del_iframe"  src="'+ url +'"  />');
	        iframe.dialog({
              autoOpen: true,
              title: "Reemplazar por el titulo de tiles-def que corresponda",
              width: 600,
              height: 500,
              padding:0,
              modal: true,
              resizable: false,
              buttons: {
                'Cerrar': function() {
                	$(this).dialog('close');}
	       	    }
	         }).width(600).height(500);
	        iframe.css("padding",0);
		});
	});
	
	/* 
	Para cerrar el dialog desde la pagina cargada en el iframe hay que hacer lo siguiente:
		
	window.parent.$('#buscarEmpresaIframe').remove();	
	
	Se hace un remove, ya que estamos creando un iframe cada vez que se hace click en el boton
	que dispara el dialog. Para que no se generen problemas de repeticion de ids y que al 
	mismo tiempo recargue la pagina desde el punto inicial en el mismo iframe, este se remueve
	por completo cuando se cierra.
	*/
	
</script>
</head>
<body>
	<div id="layoutContainer">
		<table id="layout">
			<tr>
			<td colspan="2" id="header"><%@include
					file="./../jsp/structure/header.jsp"%></td>
		</tr>
		<tr>
			<td id="strut" colspan="2"></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr id="middle">
			<td id="navigation-menu"><%@include
					file="./../jsp/structure/navigation-menu.jsp"%></td>
			<td id="content">
					<form class="form" id="formulario" accept-charset="UNKNOWN" method="post" 
						enctype="application/x-www-form-urlencoded" action="#">
					<fieldset>
						<legend>&nbsp;Formulario de ejemplo con búsquedas&nbsp;</legend>
						<table style="width: 770px;">
							<tr>
								<td class="formLabel"> <label for="privincia"><fmt:message key="label.state" />:</label></td>
								<td><input name="provincia" id="provincia" value=""
									style="text-transform: uppercase;" size="50" maxlength="100" type="text"/> 
								</td>
								<td>
								<input type="button" id="buscador" value="Buscar" />
								</td>
							</tr>
							</table>
						</fieldset>
					</form>
				</td>
			</tr>
			<tr><td colspan="2"><%@include file="./../jsp/structure/footer.jsp"%></td></tr>
		</table>
	</div>
</body>
</html>